<template>
  <div class="plane">
    <div class="row row-wrap">
      <div class="col-md-1 row-text">
        <p class="text-center">维度</p>
      </div>
      <div class="col-md-11 row-body">
        <draggable
          group="site"
          animation="300"
          v-model="arr1"
          class="draggable"
          @start="start"
          @end="end"
        >
          <transition-group class="group group1">
            <div v-for="(item, index) in arr1" :key="item.id" class="group-div" @click="edit(item)">
              <!-- <a href="javascript:void(0);">
                <i class="el-icon-delete-solid"></i>
              </a> -->
              <span class="span">{{ item.value }}</span>
              <!-- <div class="btn-group">
                <button
                  class="btn btn-default btn-xs dropdown-toggle"
                  type="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                ></button>
                <ul class="dropdown-menu">
                  <li><a href="#">默认分组</a></li>
                  <li><a href="#">名称分组</a></li>
                  <li><a href="#">自定义分组</a></li>
                </ul>
              </div> -->
              <a
                  href="javascript:void(0);"
                  @click="deleteWd (index)"
                  type="button"
                >
                  <i class="el-icon-close"></i>
                </a>
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>
    <div class="row" style="height: 8px"></div>
    <div class="row row-wrap">
      <div class="col-md-1 row-text">
        <p class="text-center">度量</p>
      </div>
      <div class="col-md-11 row-body">
        <draggable
          group="site"
          animation="300"
          v-model="arr2"
          class="draggable"
          @start="start"
          @end="end"
        >
          <transition-group class="group group2">
            <div v-for="(item, index) in arr2" :key="item.id" class="group-div">
              <!-- <a href="javascript:void(0);">
                <i class="el-icon-delete-solid"></i>
              </a> -->
              <span class="span">{{ item.value }}</span>
              <!-- <div class="btn-group">
                <button
                  class="btn btn-default btn-xs dropdown-toggle"
                  type="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                ></button>
                <ul class="dropdown-menu">
                  <li><a href="#">求和</a></li>
                  <li><a href="#">平均</a></li>
                  <li><a href="#">方差</a></li>
                </ul>
              </div> -->
              <a
                  href="javascript:void(0);"
                  @click="deleteDl(index)"
                  type="button"
                >
                  <i class="el-icon-close"></i>
                </a>
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>
     <div class="util-tab">
         <div class="" @click="formulaVisible=true">
             <img src="@asst/image/util/math1.png">
             <span>新增公式列</span>
         </div>
         <div class="" @click="summaryVisible=true">
             <img src="@asst/image/util/summary.png">
             <span>新增汇总列</span>
         </div>
     </div>
    <div class="grid">
      <Grid
        :rowData="girdData" :isEditHeader="true"
        :fieldList="fields"
        :page="page"
        @pageData="pageData"
      ></Grid>
    </div>
    <formula-dialog :dialogVisible="formulaVisible" @close="formulaVisible=false"></formula-dialog>
    <SummaryColumn :visible="summaryVisible" @cancel="summaryVisible = false"/>
  </div>
</template>

<script>
import Grid from '@/views/commonView/Grid'
import expressionData from '@/views/commonView/expressionData'
import Vue from 'vue'
import draggable from 'vuedraggable'
import FormulaDialog from "./components/formulaDialog";
import SummaryColumn from './SummaryColumn/Index'

Vue.component('Grid', Grid)
Vue.component('draggable', draggable)
export default {
  name: 'Dimension',
    components: {FormulaDialog,SummaryColumn},
    props: ['tableName', 'unitId'],
  data () {
    return {
      disabled: true,
      arr1: [],
      arr2: [],
      fields: [],
      girdData: [],
      pageSize: 15,
      currentPage: 1,
      countNum: 0,
      page: {},
      formulaVisible:false,
      summaryVisible:false
    }
  },
  methods: {
    start () {},
    end () {},
    deleteWd (index) {
       this.arr1.splice(index, 1)
    },
    deleteDl (index) {
       this.arr2.splice(index, 1)
    },
    // 拖拽完成时调用更新数据
    update (vm, arr1, arr2) {
      // 维度度量初始化完了后在执行
      if (vm.countNum < 2) {
        vm.countNum++
        return
      }
      let wd = []
      let dl = []
      wd = expressionData.setData('wd', arr1)
      if (wd.length === 0) {
        wd.push({})
      }
      dl = expressionData.setData('dl', arr2)
      // 后端要求
      if (dl.length === 0) {
        dl.push({})
      }
      let param = {
        unitId: vm.unitId,
        modelId: vm.tableName,
        type: '1',
        pageNum: vm.currentPage,
        pageSize: vm.pageSize,
        textFields1: wd,
        numberFields: dl,
        condition: []
      }
      // 保存组件获取数据
      this.saveSearch(param)
    },
    pageData (type, val) {
      if (type === 'SizeChange') {
        this.pageSize = val
      } else {
        this.currentPage = val
      }
      this.update(this, this.arr1, this.arr2)
    },
      /**
       * 备注：将历史代码中重复代码合并成一个
       * @param param
       */
     saveSearch(param,type=''){
         this.$http.post('/adhoc/dataUnits/dataUnitModify', param).then((res) => {
             let arr = res.data.body.fields;
             arr.map((a) => {
                 a.operate = true
                 a.width = 200
                 a.modelId=res.data.body.modelId;
                 a.colName=a.name;
                 //a.colType=a.colType;
                 //a.jsonData=a.jsonData
                 return a
             })
             let arr2 = res.data.body.data

             let page = {}

             page.currentPage = res.data.body.page.pageNum
             page.pageSize = res.data.body.page.pageSize
             page.total = res.data.body.page.total
             this.page = page
             this.fields = arr
             this.girdData = arr2

             // 数据共享
             let d = {
                 textFields1: res.data.body.textFields1,
                 numberFields: res.data.body.numberFields,
                 widgets: res.data.body.widgets
             }

             if(type=='init'){//初始化加载的时候才设置
                 let wd = expressionData.setData('arr', d.textFields1)
                 let dl = expressionData.setData('arr', d.numberFields)
                 this.arr1 = wd
                 this.arr2 = dl
             }

             // 统计数据
             let groupData = {}
             // arr[1].name ='endbalance';
             groupData.fields = arr
             groupData.data = arr2
             d.data = groupData
             let condition = res.data.body.condition
             if (condition.length > 0) {
                 d.condition = condition
             } else {
                 d.condition = undefined
             }
             this.$emit('centerControl', 'dimension', d)
         })
     }

  },
  // 检测拖拽变化
  watch: {
    arr1: {
      handler (newArr1) {
        let arr1 = newArr1
        let arr2 = this.arr2
        this.update(this, arr1, arr2)
      },
      immediate: false
    },
    arr2: {
      handler (mewArr2) {
        let arr1 = this.arr1
        let arr2 = mewArr2
        this.update(this, arr1, arr2)
      },
      immediate: false
    }
  },
  // 初始化
  created () {
    let unitId = this.unitId
    if (unitId) {
      let param = {
        unitId: unitId,
        type: '1'
      }
      this.saveSearch(param,'init')
    }
  }
}
</script>

<style lang="less" scoped>
.plane {
  width: 95%;
  max-height: 540px;
    overflow: auto;
  position: relative;
  margin-left: 20px;
}
.row-wrap {
  width: 100%;
  height: 35px;
  margin: 5px auto;
  position: relative;
  font-size: 14px;
}
.row-body {
  border-top: 1px solid grey;
  border-bottom: 1px solid grey;
  border-right: 1px solid grey;
}
.draggable {
  width: 100%;
  height: 35px;
  // background-color: azure;
  // margin: 3.6px 0 3.5px 0;
}
.row-text {
  border: 1px solid grey;
}
.col-md-1 p {
  text-align: center;
  margin: 7px auto;
}
.group-div {
  width: 145px;
  height: 25px;
  margin: 5px 2px 3.5px 2px;
  display: inline-block;
  background-color: #f7f8fa;
}
.span {
  overflow: hidden;
}
.group-div a {
  color: red;
  font-size: 16px;
  position: relative;
    top: -4px;
}
.span {
  display: inline-block;
  text-align: center;
  margin: 1px auto;
  // margin-left: 5px;
  width: 115px;
  overflow: hidden;
  white-space: nowrap;
}
.btn-group {
}
.group-flex {
  display: inline-block;
  width: 5px;
  height: 35px;
}
.group {
  display: block;
  width: 100%;
  height: 100%;
}
.grid {
  width: 100%;
  height: calc(100% - 160px);
    overflow: auto;
}
    .util-tab{
        display: flex;
        justify-content: flex-start;
        background-color: ghostwhite;
        >div{
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            img{
                width: 30px;
                height: 30px;
            }
        }
    }
</style>
